<template>
	<view style="width: 100%;background-color: #F7F7F7;min-height: 100vh;">

		<view class="head_box"
			:style="'background:url('+imageSrc+') no-repeat;background-size: 100%;background-position: 0;'">
			<view class="" :style="{height: naviBarHeight}">
			</view>
			<view class="right_icon">
				<u-icon @click="handNavTo('/pages/message/message')" name='bell' color="#fff" size="48"></u-icon>
				<image @click="handlePreviewImage" class="icon" src="../../static/img/qrcode.png" mode=""></image>
				<image @click="handNavTo('/pages/setting/setting')" class="icon" src="../../static/img/setting-fill.png"
					mode=""></image>
			</view>
			<view class="" @click="navToUserMsgDetail">
				<image :src="userInfo.handlUrl" class="head_img" mode=""></image>
				<view class="name_box">
					<view class="name">
						{{userInfo.nickName}}
					</view>
					<!-- 积分大于等于480，小于1880，显示普通会员标签，积分大于等于1880显示VIP会员 -->
					<view class="vip" v-if="integral>=480&&integral<1880">
						普通会员
					</view>
					<view class="vip ordinary_vip" v-if="integral>=1880">
						VIP会员
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="order_box">
				<view class="order_top u-border-bottom">
					<view class="title">
						我的订单
					</view>
					<view class="all_order" @click="handAllOrder(null)">
						查看全部订单
						<u-icon color="#919191" name="arrow-right"></u-icon>
					</view>

				</view>
				<view class="order_list">
					<view class="item" @click="navToBalance()">
						<image class="icon" src="../../static/img/yue.png" mode=""></image>
						<view class="title">
							余额
						</view>
					</view>
					<view class="item" @click="handAllOrder(0)">
						<u-badge v-if="userInfo.pendingPayment" :show-zero='false' type="error"
							:count='userInfo.pendingPayment' :offset='[-6,-6]'>
						</u-badge>
						<image class="icon" src="../../static/img/order1.png" mode=""></image>
						<view class="title">
							待付款
						</view>
					</view>
					<view class="item" @click="handAllOrder(1)">
						<u-badge v-if="userInfo.toBeShipped" :show-zero='false' type="error"
							:count='userInfo.toBeShipped' :offset='[-6,-6]'>
						</u-badge>
						<image class="icon" src="../../static/img/order2.png" mode=""></image>
						<view class="title">
							待发货
						</view>
					</view>
					<view class="item" @click="handAllOrder(2)">
						<u-badge v-if="userInfo.toBeReceived" :show-zero='false' type="error"
							:count='userInfo.toBeReceived' :offset='[-6,-6]'>
						</u-badge>
						<image class="icon" src="../../static/img/order3.png" mode=""></image>
						<view class="title">
							待收货
						</view>
					</view>
					<view class="item" @click="handAfterSale">
						<u-badge v-if="userInfo.afterSale" :show-zero='false' type="error" :count='userInfo.afterSale'
							:offset='[-6,-6]'>
						</u-badge>
						<image class="icon" src="../../static/img/order4.png" mode=""></image>
						<view class="title">
							退货/售后
						</view>
					</view>
				</view>
			</view>

		</view>
		<u-cell-group :border='false'>
			<u-cell-item @click='navToIntegral' :title-style='{fontWeight: 700}' title="我的积分" value="查看详情">
			</u-cell-item>
		</u-cell-group>
		<view class="order_list business_box">
			<view class="item" @click="handNavTo('/pages/merchantSettlement/merchantSettlement')">
				<image class="icon" src="../../static/img/bus1.png" mode=""></image>
				<view class="title">
					商家入驻
				</view>
			</view>
			<view class="item" @click="handNavTo('/pages/collection/collection')">
				<image class="icon" src="../../static/img/bus2.png" mode=""></image>
				<view class="title">
					收藏
				</view>
			</view>
			<view class="item" @click="handNavTo('/pages/followShop/followShop')">
				<image class="icon" src="../../static/img/bus3.png" mode=""></image>
				<view class="title">
					关注店铺
				</view>
			</view>
			<view class="item" @click="handNavTo('/pages/address/address')">
				<image class="icon" src="../../static/img/bus4.png" mode=""></image>
				<view class="title">
					收货地址
				</view>
			</view>
			<view class="item" @click="handNavTo('/pages/evaluate/evaluate')">
				<image class="icon" src="../../static/img/bus5.png" mode=""></image>
				<view class="title">
					评价
				</view>
			</view>
		</view>
		<!-- <view class="code_bg">
			<view class="invitation_code">
				{{userInfo.invitationCode}}
			</view>
		</view> -->
		<u-cell-group :border='false'>
			<u-cell-item @click='navToInvitation' :title-style='{fontWeight: 700}' title="我的邀请" value="查看详情">
			</u-cell-item>
		</u-cell-group>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<ZYTitle title='精选'></ZYTitle>
		<u-empty v-if="list.length==0"></u-empty>
		<view class="item_row" v-else>
			<GoodsItemRow @handNavToDetails='handNavToDetails(item)' v-for="(item,index) in list" :key='index'
				:item="item">
			</GoodsItemRow>
		</view>
		<view class="code_bg_box" v-if="showCode" @click="handCodeBg" @longpress="logoTime">
			<view class="code_logo_box">
				<image src="../../static/img/appLogo.png" class="code_logo" mode=""></image>
				<view class="code_logo_title">
					科银物联
				</view>
			</view>
			<view class="title">
				长按保存
			</view>
			<image :src="userInfo.qrCode" class="qr_code" mode=""></image>
			<view class="scanning">
				扫描邀请好友注册
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsItemRow from '@/components/ZY-Goods-item-row/ZY-Goods-item.vue'
	import ZYTitle from '@/components/ZY-title/ZY-title.vue'
	import initData from '@/mixin/initData.js'
	export default {
		mixins: [initData],
		components: {
			GoodsItemRow,
			ZYTitle
		},
		data() {

			return {
				showCode: false,
				imageSrc: '../../static/img/mybg.png',
				userInfo: {},
				integral: 0
			};

		},
		onShow() {
			const userInfo = this.cache.getCache('userInfo')
			console.log(userInfo, '用户信息')
			if (userInfo) {
				this.userInfo = userInfo
			} else {
				this.cache.removeCache('token')
				this.cache.removeCache('user')
				uni.showToast({
					title: '尚未登录,请登录',
					icon: 'none'
				})
				// code-10400 用户未登录
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}, 1000)
			}
			this.$u.api.personalCenter().then(res => {

				this.userInfo = {
					...this.userInfo,
					"pendingPayment": res.pendingPayment,
					"toBeShipped": res.toBeShipped,
					"toBeReceived": res.toBeReceived,
					"afterSale": res.afterSale
				}
				// console.log(res, '个人信息')
			})

			this.miXinInit()
			this.gitMyIntegralDetails()
		},
		mounted() {
			this.showCode = false
			uni.showTabBar({

			})

		},
		methods: {
			navToBalance() {
				uni.navigateTo({
					url: '/pages/my/balance/balance'
				})
			},
			navToInvitation() {
				uni.navigateTo({
					url: '/pages/myInvitation/myInvitation'
				})
			},
			logoTime() {
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				console.log("当前页" + pages.length - 1);
				var bitmap = null;
				var currentWebview = page.$getAppWebview();
				bitmap = new plus.nativeObj.Bitmap('amway_img');
				// 将webview内容绘制到Bitmap对象中  
				currentWebview.draw(bitmap, function() {
					console.log('截屏绘制图片成功');
					bitmap.save("_doc/a.jpg", {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								bitmap.clear(); //销毁Bitmap图片  
								uni.showToast({
									title: '保存图片成功',
									mask: false,
									duration: 1500
								});
							}
						});
					}, function(e) {
						console.log('保存图片失败：' + JSON.stringify(e));
					});
				}, function(e) {
					console.log('截屏绘制图片失败：' + JSON.stringify(e));
				});
				//currentWebview.append(amway_bit);    

				console.log(233)
			},
			handCodeBg() {
				this.showCode = false
				uni.showTabBar({

				})
			},
			gitMyIntegralDetails() {
				this.$u.api.myIntegralDetails().then(res => {
					console.log(res, 'jifen')
					this.integral = res.integral
				})

			},
			navToUserMsgDetail() {
				uni.navigateTo({
					url: '/pages/userMsg/userMsg'
				})
			},
			handAfterSale() {
				uni.navigateTo({
					url: '/pages/afterSale/afterSale'
				})

			},
			handNavToDetails(item) {
				uni.navigateTo({
					url: '/pages/followShop/goodsDetail/goodsDetail?id=' + item.id,

				})
			},
			// 请求前的参数处理
			beforeInit() {
				this.apiUrl = "carouselMap/getGoodGoodsList";
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				};

				this.params = {
					...params
				};
			},
			// 查看二维码
			handlePreviewImage() {
				uni.hideTabBar({})
				this.showCode = true
			},
			handNavTo(url) {
				uni.navigateTo({
					url
				})
			},
			navToIntegral() {
				uni.navigateTo({
					url: '/pages/integral/integral'
				})
			},
			handAllOrder(current) {
				uni.navigateTo({
					url: `/pages/order/order?current=${current}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.code_bg_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: url(../../static/img/code_bg.jpg) no-repeat;
		background-size: 100% 100%;
		z-index: 999;
		text-align: center;

		.scanning {
			position: absolute;
			bottom: 16%;
			background-color: $u-type-primary;
			padding: 20rpx;
			border-radius: 38rpx;
			color: #FFFFFF;
			// margin: 0 auto;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.code_logo_box {
			position: absolute;
			top: 10%;
			width: 100vw;
			text-align: center;

			.code_logo_title {
				font-size: 40rpx;
				font-weight: 600;
				color: #fff;

			}

			.code_logo {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 10rpx;
			}
		}

		.title {
			width: 100vw;
			position: absolute;
			top: 34%;
			// left: 50%;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
		}

		.qr_code {
			width: 400rpx;
			height: 400rpx;
			position: absolute;
			top: 38%;
			left: 50%;
			margin-left: -200rpx;



		}
	}

	.item_row {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.code_bg {
		height: 280rpx;
		width: 100%;
		background: url(../../static/img/yaoqingBG.png) no-repeat;
		background-size: 100%;
		position: relative;

		.invitation_code {
			position: absolute;
			left: 300rpx;
			top: 66rpx;
			color: #FBF2E1;
			font-size: 60rpx;

			font-weight: 600;
			text-align: center;
		}
	}

	.content {
		padding: 0 30rpx;
		margin-bottom: 16rpx;
	}

	.business_box {
		background-color: #fff;
		margin: 16rpx 0;
		padding: 50rpx 24rpx !important;
	}

	.order_list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 24rpx;

		.item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.title {
				margin-top: 7rpx;
				font-size: 26rpx;
				color: #000000;
			}

			.icon {
				width: 70rpx;
				height: 70rpx;

			}
		}
	}

	.order_box {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: -100rpx;

		.order_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx;

			.all_order {
				font-size: 24rpx;
				color: #919191;
			}

			.title {
				font-size: 28rpx;
				color: #000000;
				font-weight: 700;

			}
		}
	}

	.head_box {
		height: 458rpx;
		// background: url(../../static/img/mybg.png) no-repeat;
		// background-size: 100% 100%;

		width: 100%;
		padding: 30rpx;
		text-align: center;
		padding-top: 0;

		.name_box {
			display: flex;
			align-items: center;
			justify-content: center;

			.vip {
				// display: flex;
				width: 106rpx;
				height: 36rpx;
				text-align: center;
				line-height: 36rpx;
				margin-left: 12rpx;
				background: url(../../static/img/ordinary_vip.png) no-repeat;
				background-size: 100%;
				font-size: 24rpx;
				color: #fff;
			}

			.ordinary_vip {
				background: url(../../static/img/vip.png) no-repeat;

				background-size: 100%;
			}

			.name {
				font-size: 36rpx;
				color: #fff;
			}
		}


		.head_img {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			marign-bottom: 18rpx;
		}

		.right_icon {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.icon {
				width: 44rpx;
				height: 44rpx;
				margin-left: 40rpx;
			}
		}
	}
</style>
